<template>
  <nut-popup v-model:visible="visible" pop-class="rate-dialog">
    <image
      src="@/assets/home/icon-close-circel.png"
      class="close-btn"
      @tap="onClose"
    />
    <image src="@/assets/document/star-header.png" class="star-header" />
    <!-- <div class="rate-dialog__header"></div> -->
    <div class="rate-dialog__content">
      <div class="rate-item">
        <div class="rate-item__label">这篇推送对您有帮助吗？</div>
        <nut-rate
          v-model="formValues.helpfulnessScore"
          :size="30"
          :spacing="16"
          active-color="#FFCF41"
        />
      </div>

      <div class="rate-item">
        <div class="rate-item__label">对这篇推送的形式满意吗？</div>
        <nut-rate
          v-model="formValues.pushSatisfactionScore"
          :size="30"
          :spacing="16"
          active-color="#FFCF41"
        />
      </div>

      <div class="rate-item">
        <div class="rate-item__label">对这篇推送的内容满意吗？</div>
        <nut-rate
          v-model="formValues.contentSatisfactionScore"
          :size="30"
          :spacing="16"
          active-color="#FFCF41"
        />
      </div>
    </div>
  </nut-popup>
</template>

<script lang="ts" setup>
import { ref } from "vue";

defineOptions({
  name: "rate-dialog",
});
const emits = defineEmits(["close"]);

const visible = defineModel<boolean>({ default: false });
const formValues = ref({
  helpfulnessScore: 0,
  pushSatisfactionScore: 0,
  contentSatisfactionScore: 0,
});

const onClose = () => {
  visible.value = false;
  emits("close", formValues.value);
};
</script>

<style lang="less">
.rate-dialog {
  width: 80%;
  box-sizing: border-box;
  padding: 28px 28px 10px 28px;
  background: linear-gradient(#e3f6f2, #ffffff);
  border-radius: 20px;
  overflow-y: visible;
  .close-btn {
    position: absolute;
    transform: translate(-50%, 0);
    width: 56px;
    height: 56px;
    left: 50%;
    bottom: -100px;
  }
  .star-header {
    width: 320px;
    height: 238px;
    position: absolute;
    transform: translate(-50%, 0);
    left: 50%;
    top: -100px;
  }
  &__content {
    padding: 130px 32px 64px 32px;
    box-sizing: border-box;
    .rate-item {
      display: flex;
      flex-direction: column;
      gap: 16px;
      &:not(:last-child) {
        margin-bottom: 48px;
      }
      &__label {
        font-weight: 400;
        font-size: 28px;
        color: #000000;
        line-height: 40px;
      }
    }
  }
}
</style>
